<template>
  <div id="top" class="top">
    <div class="top_inner">
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <div v-if="!userName" class="top_left">
            <p>
              <router-link to="/">Hi，欢迎来到七多多</router-link>
            </p>
            <span @click="handlogin">请登录</span>
            <router-link to="/login?flag=zc">免费注册</router-link>
          </div>
          <div v-if="userName" class="top_left">
            <p>Hi {{nickName}}，欢迎来到七多多</p>
            <span @click="exit" class="exit pointer">退出</span>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="top_right">
            <router-link to="/">
              <span>首页</span>
            </router-link>
            <router-link to="/Personal">
              <span>个人中心</span>
            </router-link>
            <span>最近浏览</span>
            <span>
              <router-link to="/appdownload">七多多APP</router-link>
            </span>
            <span>
              <router-link to="/shopmenu">商户中心</router-link>
            </span>
            <el-dropdown>
              <span class="el-dropdown-link">
                我想合作
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <router-link to="/Settled">商家入驻</router-link>
                </el-dropdown-item>
                <el-dropdown-item>
                  <router-link to="/application">代理商</router-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <router-link to="/Hlpcenter">
              <span>帮助中心</span>
            </router-link>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import store from "@/vuex/store";
import { mapState, mapMutations } from "vuex";
export default {
  name: "top",
  data() {
    return {
      userName: "",
      nickName: ""
    };
  },
  computed: {
    ...mapState(["userInfo", "userId", "token"])
  },
  watch: {
    userId: function() {
      
    }
  },
  methods: {
    ...mapMutations(["setUserInfo", "setUserId", "setToken"]),
    //去登录页面
    handlogin() {
      sessionStorage.setItem("oldhref", location.href);
      //跳转去登录页面登录，然后返回
      this.$router.push("./login");
    },
    getUser() {
      let _this = this;
      this.$axios
        .get("/api/app/auth/findUserByMobile?mobile=" + this.userName)
        .then(res => {
          if (res.data.code == 0) {
            if (res.data.data) {
              _this.setUserInfo(res.data.data);
              _this.nickName = _this.setNickName(
                _this.userName,
                _this.userInfo.nickName
              );
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    setNickName(userName, nickName) {
      let str = nickName;
      if (!nickName) {
        str = userName.slice(0, 3) + "****" + userName.slice(7);
      }
      return str;
    },
    //点击退出
    exit() {
      this.$confirm("是否确定退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.userName = "";
          sessionStorage.setItem("state", "");
          sessionStorage.setItem("TOKEN", "");
          this.setUserInfo({});
          this.setToken("");
          this.setUserId("");
          this.setshopInfo({});
        })
        .catch(() => {});
    }
  },
  created() {
    if (this.userInfo.userName) {
        this.userName = this.userInfo.userName;
        this.nickName = this.setNickName(this.userName, this.userInfo.nickName);
      }else{
          this.userName ="";
          this.nickName = "";
      }
  }
};
</script>

<style lang="less">
body,
html {
  margin: 0px;
  padding: 0px;
}
.top {
  width: 100%;
  height: 40px;
  .top_inner {
    width: 100%;
    min-width: 1340px;
    height: 40px;
    line-height: 40px;
    background: #f2f2f2;
    font-size: 14px;
    color: #666;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    .top_left {
      text-align: left;

      span,
      p {
        display: inline-block;
        padding-left: 16px;
      }
      span {
        cursor: pointer;
      }
      a {
        padding-left: 16px;
        color: #666;
      }
      .exit {
        &:hover {
          color: rgb(65, 163, 255);
        }
      }
    }
    .top_right {
      text-align: right;
      span {
        display: inline-block;
        padding-right: 16px;
        cursor: pointer;
      }
    }
  }
}
.confirmBtn {
  margin-left: 20px;
  background-color: #ec6d2d !important;
  border-color: #ec6d2d !important;
  &:hover {
    background-color: #ad430e !important;
    border-color: #ad430e !important;
  }
}
.cancelBtn {
  margin-right: 20px;
  &:hover {
    color: #999;
    background-color: rgb(241, 238, 238);
    border-color: rgb(241, 238, 238);
  }
}
.customClass {
  width: 260px;
  height: 110px;
}
</style>


